<template>
  <div id="homepage">

    <!-- 走马灯图片栏 -->
    <section class="carousel-section">
      <el-carousel trigger="click" height="400px" indicator-position="outside">
        <el-carousel-item v-for="(item, index) in carouselImages" :key="index">
          <img :src="item" class="carousel-image" />
        </el-carousel-item>
      </el-carousel>
    </section>

    <!-- 新闻展示 -->
    <section class="news-section">
      <h2>新闻公告</h2>
      <el-row :gutter="20">
        <el-col :span="8" v-for="(news, index) in newsLinks" :key="index">
          <el-card shadow="hover">
            <a :href="news.link" target="_blank">{{ news.title }}</a>
          </el-card>
        </el-col>
      </el-row>
    </section>

  </div>
</template>

<script>
export default {
  name: "HomePageView",
  data() {
    return {
      username: "",
      password: "",
      carouselImages: [
        "https://ts1.cn.mm.bing.net/th/id/R-C.1927dcedf316ff4e88db934711270c3d?rik=7OC62ILqmCaLtg&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f40168%2f4382.jpg_wh860.jpg&ehk=fmYxp5b8zaHE2QMMMOqA7nNLvP3F%2fktXCg7c%2bo6w4kY%3d&risl=&pid=ImgRaw&r=0",
        "https://tse1-mm.cn.bing.net/th/id/OIP-C.0_dpo_BywH2CF_STkz-vjwHaDt?w=436&h=174&c=7&r=0&o=5&dpr=2&pid=1.7",
        "https://seopic.699pic.com/photo/50065/8571.jpg_wh1200.jpg",
      ],
      newsLinks: [
        { title: "银行新推出储蓄产品，收益翻倍", link: "#" },
        { title: "个人贷款利率下降，优惠多多", link: "#" },
        { title: "移动银行APP全新上线，安全便捷", link: "#" },
        { title: "关于最新外汇业务的公告", link: "#" },
        { title: "银行系统维护通知，敬请谅解", link: "#" },
        { title: "信用卡申请快捷通道开放", link: "#" },
      ],
    };
  },
  methods: {
    login() {
      if (this.username && this.password) {
        this.$message.success(`欢迎, ${this.username}!`);
      } else {
        this.$message.error("请输入有效的用户名和密码");
      }
    },
  },
};
</script>

<style scoped>
/* 通用样式 */
#homepage {
  font-family: "Arial", sans-serif;
}

/* 导航栏整体样式 */
.navbar {
  display: flex;
  justify-content: space-between;
  /* 左中右布局 */
  align-items: center;
  background-color: #c90000;
  height: 60px;
  padding: 0 50px;
}

/* 左侧的 logo 和标题 */
.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 40px;
  margin-right: 10px;
  /* 图标和文字的间距 */
}

.logo span {
  font-size: 18px;
  color: white;
}

/* 中部的菜单居中 */
.menu-center {
  flex-grow: 1;
  /* 占满中间可用空间 */
  display: flex;
  justify-content: center;
  /* 菜单居中 */
}

/* 菜单项样式 */
.el-menu-item {
  margin: 0 15px;
  /* 控制菜单项的间距 */
  color: white;
}

/* 右侧的登录按钮 */
.login-menu {
  margin-left: auto;
}


/* 菜单居中 */
.el-menu-demo {
  display: flex;
  justify-content: center;
  /* 菜单项居中 */
  background-color: transparent;
  /* 保持背景透明 */
}

/* 菜单项样式 */
.el-menu-item {
  color: white;
  font-size: 16px;
  margin: 20 5px;
  /* 控制菜单项之间的间距 */
}


.el-menu-item {
  color: white;
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

.el-menu-item:hover {
  background-color: #a50000;
  /* 悬停时背景色稍微变深 */
}

/* 登录按钮的位置 */
.login-menu {
  position: absolute;
  right: 10px;
  top: 20px;
}

.login-menu .el-button {
  color: white;
  background-color: #c90000;
  /* 使登录按钮与导航栏一致 */
  border: none;
}


/* 走马灯部分样式 */
.carousel-section {
  margin-top: 20px;
}

.carousel-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* 新闻部分样式 */
.news-section {
  padding: 50px 20px;
  background-color: #f7f7f7;
  text-align: center;
}

.news-section h2 {
  font-size: 28px;
  margin-bottom: 30px;
}

.el-card {
  text-align: center;
}

.el-card a {
  text-decoration: none;
  color: #c90000;
  font-weight: bold;
}

.el-card a:hover {
  color: #a50000;
}

/* 页脚样式 */
.footer {
  text-align: center;
  padding: 20px;
  background-color: #c90000;
  color: white;
}
</style>
